{% extends "base.html" %}
{% load staticfiles %}

{% block title %}实体账户{% endblock %}
{% block styles %}
    <style>
        .fixed-table-body {
            height: 60% !important;
        }
    </style>
{% endblock %}

{% block content %}

    <!-- 右侧最上方 -->
    {#    <section class="content-header">#}
    {#        <h1>#}
    {#            实体账户#}
    {#            <small>{{ allHtml.title }}</small>#}
    {#        </h1>#}
    {#        <ol class="breadcrumb">#}
    {#            <li><a href="#"><i class="fa fa-dashboard"></i>PY</a></li>#}
    {#            <li class="active">实体账户</li>#}
    {#        </ol>#}
    {#    </section>#}
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#fa-icons" data-toggle="tab">实体账户</a></li>
                    </ul>

                    <div class="tab-content ">
                        <div class="tab-pane active mailbox-messages" id="fa-icons">
                            <div class=" mailbox-messages">
                                <table id="toolbar"></table>
                                <table class="table table-bordered table-striped table-hover" id="InstrumentTable">

                                </table>
                            </div>
                        </div>
                        <div class="tab-pane" id="glyphicons">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- class model 的 add change模态框 -->
    <div class="modal fade" id="modal_model_field" data-backdrop="static">
        <div class="modal-dialog" style="width: 450px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body" style="padding: 30px;height:auto">
                    <form>
                        <div style="margin-top:3%"><label>通道ID</label><input class="opts form-control" id="channelid"
                                                                             name="channelid" type="text"
                                                                             placeholder="通道ID(必填)"></div>
                        <div style="margin-top:3%"><label>外部接口类型</label>
                            <select class="opts form-control" id="apitype" name="apitype">
                                <option name="apitype" value="" selected>
                                    接口类型(必填)
                                </option>
                                <option name="apitype" value="1">
                                    CTP
                                </option>
                                <option name="apitype" value="3">
                                    FEMAS
                                </option>
                                <option name="apitype" value="4">
                                    SIM
                                </option>
                                <option name="apitype" value="5">
                                    UFX
                                </option>
                                <option name="apitype" value="6">
                                    CFETS
                                </option>
                                <option name="apitype" value="7">
                                    SIP
                                </option>
                                <option name="apitype" value="8">
                                    CFETS_xQuant
                                </option>
                                <option name="apitype" value="9">
                                    MDCenter
                                </option>
                                <option name="apitype" value="a">
                                    QBMD
                                </option>
                            </select>
                        </div>
                        <div style="margin-top:3%"><label>通道类型</label>
                            <select class="opts form-control" id="terminaltype" name="terminaltype">
                                <option value="" selected>
                                    通道类型(必填)
                                </option>
                                <option value="1" id="tmtype_td" style="display: none">
                                    TRADE
                                </option>
                                <option value="2" id="tmtype_md" style="display: none">
                                    MARKET
                                </option>
                                <option value="3" id="tmtype_bt" style="display: none">
                                    BOTH
                                </option>
                            </select>
                        </div>
                        <div style="margin-top:3%"><label>交易账号</label><input class="opts form-control" id="userid"
                                                                             name="userid"
                                                                             type="text" placeholder="交易账号(必填)"></div>
                        <div style="margin-top:3%"><label>登录密码</label><input class="opts form-control" id="password"
                                                                             name="password"
                                                                             type="text" placeholder="登录密码(必填)"></div>
                        <div style="margin-top:3%"><input class="opts" id="ismd5" name="ismd5" type="checkbox">已加密
                            <div style="margin-top:3%;display: none" id="jy"><label>交易地址</label>
                                <input class="opts form-control" id="id_trade" name="trade" type="text"
                                       placeholder="交易地址">
                            </div>
                            <div style="margin-top:3%;display: none" id="qq"><label>请求地址</label>
                                <input class="opts form-control" id="id_qq" name="qq" type="text" placeholder="请求地址">
                            </div>
                            <div style="margin-top:3%;display: none" id="hq"><label>行情地址</label>
                                <input class="opts form-control" id="addresslist" name="addresslist" type="text"
                                       placeholder="行情地址">
                            </div>
                            <div style="margin-top:3%;display: none" id="xxts"><label>消息推送地址</label>
                                <input class="opts form-control" id="id_news" name="news" type="text"
                                       placeholder="消息推送地址">
                            </div>
                            <div style="margin-top:3%;display: none" id="fwq"><label>服务器地址</label>
                                <input class="opts form-control" id="id_fwq" name="fwq" type="text" placeholder="服务器地址">
                            </div>
                            <div style="margin-top:3%;display: none" id="xxzx"><label>消息中心地址</label>
                                <input class="opts form-control" id="id_xxzx" name="xxzx" type="text"
                                       placeholder="消息中心地址">
                            </div>
                            <div style="margin-top:3%;display: none" id="xxfw"><label>信息服务地址</label>
                                <input class="opts form-control" id="id_xxfw" name="xxfw" type="text"
                                       placeholder="信息服务地址">
                            </div>
                            <div style="margin-top:3%"><label>收盘时间</label><input class="opts form-control"
                                                                                 id="closetimepoint"
                                                                                 name="closetimepoint"
                                                                                 type="text" placeholder="收盘时间(必填)">
                            </div>
                            <div style="margin-top:3%"><label>日志级别</label>
                                <select name="loglevel" class="form-control" id="loglevel">
                                    <option value="0">关闭</option>
                                    <option value="1">严重</option>
                                    <option value="2">错误</option>
                                    <option value="3">报警</option>
                                    <option value="4">信息</option>
                                    <option value="5" selected>调试</option>
                                    <option value="6">跟踪</option>
                                </select>
                            </div>
                            <div style="margin-top:3%"><label>接口扩展信息</label>
                                <textarea name="extendinfo" cols="40" rows="10" class="form-control" id="extendinfo">
                                </textarea>
                            </div>
                            <div style="margin-top:3%"><label>是否启用</label>
                                <select class="opts form-control" id="isactive" name="isactive">
                                    <option name="isactive" value="0">
                                        否
                                    </option>
                                    <option name="isactive" value="1">
                                        是
                                    </option>
                                </select>
                            </div>

                            <div style="margin-top:3%">
                                <span style="margin-left:10%;cursor:pointer;padding:5px" class="btn-primary"
                                      onclick="sub(gets)">提交
                                </span>
                                <span style="cursor:pointer;margin-left:60%;padding:5px" onclick="fad()"
                                      class="btn-success">取消</span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <!-- 删除 -->
    <div class="modal fade" id="modal_delete" data-backdrop="static">
        <div class="modal-dialog" style="width: 300px;background-color:#eee">
            <div class="modal-content">
                <div class="modal-body" style="padding:5px;height:80px;overflow:auto">
                    <div>
                        <p style="margin-top:10px;margin-left:5px;">是否确定删除实体账户</p>
                        <div>
                            <span id="del" sid="" onclick="quit__()"
                                  style="padding:2px;cursor:pointer;float:right;margin-right:10px" class="btn-success">取消</span>
                            <span onclick="del_()" style="padding:2px;cursor:pointer;float:right;margin-right:10px"
                                  class="btn-success">确定</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


{% endblock %}


{% block scripts %}

    <script type="text/javascript">

        //实体账户修改页面禁止修改字段
        var channelid = document.getElementById("channelid")
        var apitype = document.getElementById("apitype")
        var terminaltype = document.getElementById("terminaltype")
        var userid = document.getElementById("userid")
        var isactive = document.getElementById("isactive")


        //模态框隐藏时触发,将上一次选中的各种地址input框display置为none,
        //把修改页面的禁用去除掉
        $("#modal_model_field").on('hidden.bs.modal', function () {
            {#console.log("触发了隐藏")#}
            var address_hq = document.getElementById("hq")
            var address_jy = document.getElementById("jy")
            var address_xxts = document.getElementById("xxts")
            var address_fwq = document.getElementById("fwq")
            var address_xxzx = document.getElementById("xxzx")
            var address_qq = document.getElementById("qq")
            var address_xxfw = document.getElementById("xxfw")

            var channel_tdtype = document.getElementById("tmtype_td")
            var channel_mdtype = document.getElementById("tmtype_md")
            var channel_bttype = document.getElementById("tmtype_bt")

            {#tmtype.value = ""#}
            address_hq.style.display = "none";
            address_jy.style.display = "none";
            address_xxts.style.display = "none";
            address_fwq.style.display = "none";
            address_xxzx.style.display = "none";
            address_qq.style.display = "none";
            address_xxfw.style.display = "none";

            channel_bttype.style.display = "none";
            channel_tdtype.style.display = "none";
            channel_mdtype.style.display = "none";


            //去除修改页面的禁用
            channelid.removeAttribute("readonly")
            apitype.removeAttribute("disabled")
            terminaltype.removeAttribute("disabled")
            {#userid.removeAttribute("readonly")#}
            isactive.removeAttribute("disabled")


        })

        //外部接口监听事件

        $('#apitype').on('change', function () {
            var tmtype = $("select[name=apitype]").val();
            var termtype = $("select[name=terminaltype]").val("")
            $("#extendinfo").val("")
            if (tmtype != '6') {
                var data = {"flag": "extendinfo", "apitype": $("#apitype").val()}
                //往后台发送post请求，将接口扩展信息渲染到前端
                $.post("{% url 'Manager:channel_cud' %}", data, function (r) {
                    if (r) {
                        $("#extendinfo").val(r)
                    } else {
                        $("#extendinfo").val("")
                    }
                });
            } else {
                $("#terminaltype").on('change', function () {

                    var data1 = {"flag": "extendinfo", "apitype": $("#apitype").val(), 'terminaltype': $("#terminaltype").val()}

                    //往后台发送post请求，将接口扩展信息渲染到前端
                    $.post("{% url 'Manager:channel_cud' %}", data1, function (r) {
                        if (r) {
                            $("#extendinfo").val(r)
                        } else {
                            $("#extendinfo").val("")
                        }
                    });
                })
            }


            {#console.log(tmtype)#}
            {#console.log(termtype)#}
            {#console.log("新建的监听")#}
            {#var tmtype = document.getElementById("id_terminaltype")#}
            var address_hq = document.getElementById("hq")
            var address_jy = document.getElementById("jy")
            var address_xxts = document.getElementById("xxts")
            var address_fwq = document.getElementById("fwq")
            var address_xxzx = document.getElementById("xxzx")
            var address_qq = document.getElementById("qq")
            var address_xxfw = document.getElementById("xxfw")

            var channel_tdtype = document.getElementById("tmtype_td")
            var channel_mdtype = document.getElementById("tmtype_md")
            var channel_bttype = document.getElementById("tmtype_bt")

            {#tmtype.value = ""#}
            address_hq.style.display = "none";
            address_jy.style.display = "none";
            address_xxts.style.display = "none";
            address_fwq.style.display = "none";
            address_xxzx.style.display = "none";
            address_qq.style.display = "none";
            address_xxfw.style.display = "none";

            channel_bttype.style.display = "none";
            channel_tdtype.style.display = "none";
            channel_mdtype.style.display = "none";


            if (tmtype == 1) { // CTP被选中
                channel_tdtype.style.display = "block";
                channel_mdtype.style.display = "block";
                address_hq.style.display = "block";
                address_jy.style.display = "block";
                $("#terminaltype").change(function () {
                    var ttype = $("select[name=terminaltype]").val()
                    {#console.log(ttype)#}
                    {#alert(ttype)#}
                    if (ttype == "1") {
                        address_hq.style.display = "none";
                        address_jy.style.display = "block";
                    } else if (ttype == "2") {
                        address_jy.style.display = "none"
                        address_hq.style.display = "block";
                    } else {
                        address_hq.style.display = "block";
                        address_jy.style.display = "block";
                    }
                })

            } else if (tmtype == 3) { // FEMAS被选中
                {#$("select[name=terminaltype]").val("")#}
                channel_tdtype.style.display = "block";
                channel_mdtype.style.display = "block";
                address_hq.style.display = "block";
                address_jy.style.display = "block";
                $("#terminaltype").change(function () {
                    var ttype = $("select[name=terminaltype]").val()
                    {#console.log(ttype)#}
                    {#alert(ttype)#}
                    if (ttype == "1") {
                        address_hq.style.display = "none";
                        address_jy.style.display = "block";
                    } else if (ttype == "2") {
                        address_jy.style.display = "none"
                        address_hq.style.display = "block";
                    } else {
                        address_hq.style.display = "block";
                        address_jy.style.display = "block";
                    }
                })
            } else if (tmtype == 4) { //SIM被选中
                {#$("select[name=terminaltype]").val("")#}
                channel_tdtype.style.display = "block";
                channel_mdtype.style.display = "block";
                channel_bttype.style.display = "block";
                address_fwq.style.display = "block";
                address_hq.style.display = "none";
                address_jy.style.display = "none";
                $("#terminaltype").change(function () {
                    address_hq.style.display = "none";
                    address_jy.style.display = "none";
                })
            } else if (tmtype == 5) { //UFX被选中
                {#$("select[name=terminaltype]").val("")#}
                channel_tdtype.style.display = "block";
                address_jy.style.display = "block";
                address_xxzx.style.display = "block";
                address_hq.style.display = "none";
                $("#terminaltype").change(function () {
                    address_hq.style.display = "none";
                    address_jy.style.display = "block";
                })
            } else if (tmtype == 6) { //CFETS被选中
                {#$("select[name=terminaltype]").val("")#}
                channel_tdtype.style.display = "block";
                channel_mdtype.style.display = "block";
                address_jy.style.display = "block";
                address_hq.style.display = "block";
                $("#terminaltype").change(function () {
                    var ttype = $("select[name=terminaltype]").val()
                    {#console.log(ttype)#}
                    {#alert(ttype)#}
                    if (ttype == "1") {
                        address_hq.style.display = "none";
                        address_jy.style.display = "block";
                    } else if (ttype == "2") {
                        address_jy.style.display = "none"
                        address_hq.style.display = "block";
                    } else {
                        address_hq.style.display = "block";
                        address_jy.style.display = "block";
                    }
                })
            } else if (tmtype == 8) { //CFETS_xQuant被选中
                channel_tdtype.style.display = "block";
                channel_mdtype.style.display = "block";
                channel_bttype.style.display = "block";
                address_qq.style.display = "block";
                address_hq.style.display = "block";
                address_xxts.style.display = "block";
                $("#terminaltype").change(function () {
                    address_hq.style.display = "block";
                    address_jy.style.display = "none";
                })
            } else if (tmtype == 7) { //SIP被选中
                channel_mdtype.style.display = "block";
                address_hq.style.display = "block";
                address_xxfw.style.display = "block";
                $("#terminaltype").change(function () {
                    address_hq.style.display = "block";
                    address_jy.style.display = "none";
                })
            } else if (tmtype == 9) { //MDCenter被选中
                channel_mdtype.style.display = "block";
                address_hq.style.display = "block";
                address_xxfw.style.display = "block";
                $("#terminaltype").change(function () {
                    address_hq.style.display = "block";
                    address_jy.style.display = "none";
                })
            } else if (tmtype == "a") { //QBMD被选中
                channel_mdtype.style.display = "block";
                address_hq.style.display = "block";
                $("#terminaltype").change(function () {
                    address_hq.style.display = "block";
                    address_jy.style.display = "none";
                })
            }

        })


        function gets() {

            //实体账户提交，对不同地址进行拼接

            <!--先获取各个地址input的值，有则取，无则空-->
            var address_hq_value = $("#addresslist").val()
            var address_jy_value = $("#id_trade").val()
            var address_xxts_value = $("#id_news").val()
            var address_fwq_value = $("#id_fwq").val()
            var address_xxzx_value = $("#id_xxzx").val()
            var address_qq_value = $("#id_qq").val()
            var address_xxfw_value = $("#id_xxfw").val()
            //有三种情况，分别是一个，两个和三个的地址，根据修改意见做的完善
            if (address_jy_value) {
                if (address_xxzx_value) {
                    var test = address_jy_value + ";" + address_xxzx_value
                    console.log("1:", test)
                    $("#addresslist").val(address_jy_value + ";" + address_xxzx_value)
                } else {
                    $("#addresslist").val(address_jy_value)
                }

            } else if (address_hq_value) {
                if (address_qq_value) {
                    $("#addresslist").val(address_qq_value + ";" + address_hq_value + ";" + address_xxts_value);
                } else if (address_xxfw_value) {
                    $("#addresslist").val(address_hq_value + ";" + address_xxfw_value);
                } else {
                    $("#addresslist").val(address_hq_value)
                }
            } else if (address_fwq_value) {
                $("#addresslist").val(address_fwq_value)
            }
            data = {
                'channelid': JSON.stringify([$('#channelid').val()]),
                'apitype': JSON.stringify([$('#apitype').val()]),
                'terminaltype': JSON.stringify([$('#terminaltype').val()]),
                'userid': JSON.stringify([$('#userid').val()]),
                'password': JSON.stringify([$('#password').val()]),
                'ismd5': JSON.stringify([$("#ismd5").is(':checked')]),
                'addresslist': JSON.stringify([$('#addresslist').val()]),
                'closetimepoint': JSON.stringify([$('#closetimepoint').val()]),
                'loglevel': JSON.stringify([$('#loglevel').val()]),
                'extendinfo': JSON.stringify([$('#extendinfo').val()]),
                'isactive': JSON.stringify([$('#isactive').val()]),
            }
            return data;
        }

        <!--添加，修改-->
        function sub(func) {
            data = func();
            //对提交的数据进行遍历，json解析成数组取第一个值，然后取Bool值，
            // 如果是false(空)，则alert，并且返回空，不继续执行下面代码
            for (let key in data) {
                var item = JSON.parse(data[key])[0]
                if (Boolean(item) == false && key != 'extendinfo' && key != 'ismd5') {
                    var title = $("#" + key).prev().text()
                    alert(title + "不能为空!")
                    return
                }
                if (key == "userid" && item.length > 20) {
                    var title = $("#" + key).prev().text()
                    alert(title + "长度不能超过20!")
                    return
                }
            }

            $.post("{% url 'Manager:channel_cud' %}", data, function (r) {
                if (r == 'y') {
                    //新建成功则跳转，否则传错误信息
                    window.location.reload();
                } else {
                    alert(r)
                    {#window.location.reload();#}
                }
            });
        }

        <!-- 新建,修改,模态框取消按钮 -->
        function fad() {
            $('#modal_model_field').modal('hide');
        }

        <!-- .modal-title:模态框，class modele 的 all 字段 -->
        function modify(id) {
            $('.modal-title').text('修改');
            $("#ismd5").attr("checked", "checked")
            $.get("{% url 'Manager:channel_cud' %}", {'channelid': id}, function (r) {
                ////////// 实体账户修改页面对行情，交易及消息推送地址的展示选项//////////////
                var address_hq = document.getElementById("hq")
                var address_jy = document.getElementById("jy")
                var address_xxts = document.getElementById("xxts")
                var address_fwq = document.getElementById("fwq")
                var address_xxzx = document.getElementById("xxzx")
                var address_qq = document.getElementById("qq")
                var address_xxfw = document.getElementById("xxfw")

                var channel_tdtype = document.getElementById("tmtype_td")
                var channel_mdtype = document.getElementById("tmtype_md")
                var channel_bttype = document.getElementById("tmtype_bt")

                //拿到外部接口类型的值
                var tmtype = r['apitype'];
                var ttypedisplay = r['terminaltype']
                var termtype = $("select[name=terminaltype]").val(ttypedisplay);
                if (ttypedisplay == "1") {
                    address_hq.style.display = "none";
                    address_jy.style.display = "block";
                } else if (ttypedisplay == "2") {
                    address_hq.style.display = "block";
                    address_jy.style.display = "none";
                } else if (ttypedisplay == "3") {
                    address_jy.style.display = "block";
                    address_hq.style.display = "block";
                } else {
                    address_jy.style.display = "none";
                    address_hq.style.display = "none"
                }
                {#console.log(termtype, "123")#}
                {#console.log(tmtype)#}
                if (tmtype == 1) { // CTP被选中
                    channel_tdtype.style.display = "block";
                    channel_mdtype.style.display = "block";
                    {#address_hq.style.display = "block";#}
                    {#address_jy.style.display = "block";#}

                } else if (tmtype == 3) { // FEMAS被选中
                    {#$("select[name=terminaltype]").val("")#}
                    channel_tdtype.style.display = "block";
                    channel_mdtype.style.display = "block";


                } else if (tmtype == 4) { //SIM被选中
                    {#$("select[name=terminaltype]").val("")#}
                    channel_tdtype.style.display = "block";
                    channel_mdtype.style.display = "block";
                    channel_bttype.style.display = "block";
                    address_fwq.style.display = "block";
                    address_hq.style.display = "none";
                    address_jy.style.display = "none";
                } else if (tmtype == 5) { //UFX被选中
                    channel_tdtype.style.display = "block";
                    address_jy.style.display = "block";
                    address_xxzx.style.display = "block";
                    {#address_hq.style.display = "none";#}
                } else if (tmtype == 6) { //CFETS被选中
                    channel_tdtype.style.display = "block";
                    channel_mdtype.style.display = "block";
                    {#address_jy.style.display = "block";#}
                    {#address_hq.style.display = "block";#}
                } else if (tmtype == 8) { //CFETS_xQuant被选中
                    channel_tdtype.style.display = "block";
                    channel_mdtype.style.display = "block";
                    channel_bttype.style.display = "block";
                    address_qq.style.display = "block";
                    address_hq.style.display = "block";
                    address_xxts.style.display = "block";
                    address_jy.style.display = "none";
                } else if (tmtype == 7) { //SIP被选中
                    channel_mdtype.style.display = "block";
                    address_hq.style.display = "block";
                    address_xxfw.style.display = "block";
                } else if (tmtype == 9) { //MDCenter被选中
                    channel_mdtype.style.display = "block";
                    address_hq.style.display = "block";
                    address_xxfw.style.display = "block";
                } else if (tmtype == "a") { //QBMD被选中
                    channel_mdtype.style.display = "block";
                    address_hq.style.display = "block";
                }
                if (r) {
                    for (var key in r) {
                        if (key == "addresslist") {
                            arr = r[key].split(";")
                            if (arr.length == 1) {
                                if (address_hq.style.display == "block") {
                                    $("#addresslist").val(arr[0])
                                } else if (address_jy.style.display == "block") {
                                    $("#id_trade").val(arr[0])
                                } else {
                                    $("#id_fwq").val(arr[0])
                                }
                            } else if (arr.length == 2) {
                                if (address_jy.style.display == "block") {
                                    $("#id_trade").val(arr[0]);
                                    $("#id_xxzx").val(arr[1]);
                                } else {
                                    $("#addresslist").val(arr[0]);
                                    $("#id_xxfw").val(arr[1]);
                                }
                            } else {
                                $("#id_qq").val(arr[0]);
                                $("#addresslist").val(arr[1]);
                                $("#id_news").val(arr[2]);
                            }
                        } else {
                            if ($('#' + key)) {
                                $('#' + key).val(r[key]);
                            }
                        }
                    }
                }
                //实体账户修改页面禁止修改字段
                if ((channelid != null) && (channelid.value != "") &&
                    (apitype != null) && (apitype.value != "") &&
                    (terminaltype != null) && (terminaltype.value != "") &&
                    (userid != null) && (userid.value != "") &&
                    (isactive != null) && (isactive.value != "")) {
                    channelid.setAttribute("readonly", "readonly");
                    apitype.setAttribute("disabled", "true"); //下拉框禁止修改，用这两句
                    terminaltype.setAttribute("disabled", "disabled");
                    {#userid.setAttribute("readonly", "readonly");#}
                    {#isactive.setAttribute("onchange", "this.selectedIndex=this.defaultIndex")#}

                }
            });
        }

        <!--创建-->
        function create() {
            $('.modal-title').text('新建');
            $('.opts').val("");
            //把日志级别设置为调试
            $("select[name=loglevel]").val("5")

            //把接口扩展信息设置为空
            $("#extendinfo").val("")

            //把是否启用设置为是
            $("#isactive").val("1")

            $("#ismd5").removeAttr("checked", "checked")

            $("#channelid").on('change', function () {
                var channelid = $("#channelid").val()
                $.post("{% url 'Manager:channel_cud' %}", {"chnelid": channelid}, function (r) {
                    if (r == 'q') {
                        alert("通道ID已存在！");
                        $("#channelid").val("")
                    }
                });
            })
        };

        <!-- 删除的取消 -->
        function quit__() {
            $('#modal_delete').modal('hide');
        }

        <!-- 删除模态框 -->
        function _delete(d) {
            $('#modal_delete').modal('show');
            $('#del').attr('sid', d);
        }

        <!-- 向后台发送post请求，删除数据库 -->
        function del_() {
            d = $('#del').attr('sid');//该值是从js动态渲染删除里面拿到的，先_delete，再del_
            $.post("{% url 'Manager:channel_cud' %}", {'id': d, 'delete': 1}, function (r) {
                if (r == 'y') {
                    window.location.reload();
                } else {
                    alert(r)
                    $('#modal_delete').modal('hide');
                }
            });//post请求的回调函数，空值show"默认合约不可修改"，y值则删除后跳转。
        };

        function InitBootstrapTable(my_url, my_table_id, my_columns, my_filename) {
            $('#' + my_table_id).bootstrapTable('destroy').bootstrapTable({
                url: my_url,
                method: 'get',
                columns: my_columns,
                toolbar: '#toolbar',
                striped: true,
                cache: false,
                pagination: true,
                sortable: true,
                sortOrder: "asc",
                queryParams: function (pageRequest) {
                    return pageRequest;
                },
                sidePagination: "server",
                pageNumber: 1,
                pageSize: 10,
                pageList: [10, 25, 50, 100],
                search: true,      //这里的search是bootstrap内置的查询方法，同时可以发给后台做判断  
                strictSearch: false,
                showColumns: true,
                showRefresh: true,
                minimumCountColumns: 2,
                clickToSelect: true,
                uniqueId: "Symbol",
                showToggle: true,
                cardView: false,
                detailView: false,
                //showExport: true,
                buttonsAlign: "right",
                exportDataType: "all",
                exportTypes: ['excel'],
                Icons: 'glyphicon-export',
                exportOptions: {
                    fileName: my_filename,
                },
            })
        };

        <!--my_columns field: 'channelid',从后台取值-->
        my_columns = [
            {
                field: 'channelid',
                title: '通道ID'
            }, {
                field: 'apitype',
                title: '外部接口类型'
            }, {
                field: 'terminaltype',
                title: '通道类型'
            }, {
                field: 'userid',
                title: '交易账号'
            },
            {#{#}
            {#    field: 'password',#}
            {#    title: '登录密码'#}
            {# }, #}
            {
                field: 'addresslist',
                title: '通道地址列表'
            }, {
                field: 'closetimepoint',
                title: '收盘时间',
            }, {
                field: 'loglevel',
                title: '日志级别',
            },
            {#{#}
            {#    field: 'extendinfo',#}
            {#    title: '接口扩展信息',#}
            {# }, #}
            {
                field: 'isactive',
                title: '是否启用',
            }, {
                field: 'option',
                title: '操作',
                formatter: function (value, row, index) {
                    return "<span onclick=\"modify('" + value + "')\" class='btn btn-success btn-xs btn-flat btn_operation' data-toggle='modal' data-target='#modal_model_field'> <i class='fa fa-pencil'></i>修改</span> " + "&nbsp<span onclick=\"_delete('" + value + "')\" type='button' class='btn btn-danger btn-xs btn-flat btn_operation'> <i class='fa fa-pencil'></i>删除</span> ";
                }
            },
        ];

        <!-- 列表页渲染数据 -->
        InitBootstrapTable("{% url 'Manager:channel_list' %}", "InstrumentTable", my_columns, "symbols");

        <!-- 列表页渲染数据 -->
        $('.fixed-table-toolbar').append("&nbsp <span onclick='create()' type='button' class='btn btn-success btn-xs btn-flat btn_operation' data-toggle='modal' data-target='#modal_model_field'> <i class='fa fa-pencil'></i>新建</span>");

        $('.page-list').css('display', 'none');
        $('.pagination-info').css('display', 'none');

        <!-- 查询框的提示信息 -->
        $('*[placeholder="Search"]').attr('placeholder', '请输入通道ID');


    </script>

{#    <style>#}
{#        .pagination-info {#}
{#            display: none#}
{#        }#}
{##}
{#        .page-list {#}
{#            display: none#}
{#        }#}
{##}
{#        #fileTable td {#}
{#            width: 120px;#}
{#            margin-top: 5px#}
{#        }#}
{##}
{#        .file {#}
{#            position: relative;#}
{#            display: inline-block;#}
{#            background: #D0EEFF;#}
{#            border: 1px solid #99D3F5;#}
{#            border-radius: 4px;#}
{#            padding: 4px 12px;#}
{#            overflow: hidden;#}
{#            color: #1E88C7;#}
{#            text-decoration: none;#}
{#            text-indent: 0;#}
{#            line-height: 20px;#}
{#            float: right;#}
{#            margin-top: 12px;#}
{#            margin-right: 5px#}
{#        }#}
{##}
{#        .file input {#}
{#            position: absolute;#}
{#            font-size: 100px;#}
{#            right: 0;#}
{#            top: 0;#}
{#            opacity: 0;#}
{#        }#}
{##}
{#        .file:hover {#}
{#            background: #AADFFD;#}
{#            border-color: #78C3F3;#}
{#            color: #004974;#}
{#            text-decoration: none;#}
{#        }#}
{#    </style>#}

{% endblock %}